<template>
    <div>
        <el-row :gutter="20" style="line-height:50px;">
            <el-col :span="20" :offset="2" v-for="(it,index) in userData" :key = "index">
                <el-card shadow="always">
                    <el-row :gutter="20" @click.native="tochat(it)">
                        <el-col :span="3">
                            <span style="font-size:50px"><i class="el-icon-user-solid"></i></span>
                        </el-col>
                        <el-col :span="17">
                            <span style="font-weight:600;font-size:larger;float:left">{{it.username}}</span>
                            <br>
                            <span style="float:left;color:gainsboro"> &如消息过多打扰到你，可点击此处进行无效操作</span>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import {getSuspenseOrderUser} from '@/utils/modules/employee'
export default {
    props:['employeeId'],
    watch:{
        employeeId:{
            handler:function(newVal){
                this.keepEmployeeId  =newVal
            },
            immediate:true,
            deep:true
        }
    },
    mounted() {
        this.init()
    },
    data() {
        return {
            userData:[],
            keepEmployeeId:''
        }
    },
    methods: {
        init(){
            getSuspenseOrderUser().then(res=>{
                this.userData = JSON.parse(JSON.stringify(res.data.itemList))
            }).catch(err=>{
                this.$message({
                    type:'error',
                    message:err.message,
                    showClose:true
                })
            })
        },
        tochat(val){
            this.$router.push({
                path:'/chat',
                query:{
                    fromId:this.keepEmployeeId,
                    toId:val.id,
                    // 这个参数用来判断是用户还是员工
                    fromSign:1,
                    toSign:0
                    // toUsername:val.username
                }
            })
        }
    },
}
</script>
<style>
.el-icon-user-solid:before {
    font-size: 40px;
}
</style>